<template>
  <div class="preview-section" v-if="hidden">
    <div class="preview-bg"></div>
    <div class="preview-content" @click.stop="close($event)">
      <video width="100%" height="100%" controls="controls" style="object-fit:cover;">
        <source src="">
        你的浏览器不支持HTML5视频。
      </video>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {
    previewSrc: {
      type: String,
      default: "",
    },
    hidden: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    // 关闭预览组件
    close(e) {
      if (e.target.tagName === "VIDEO") return;
      this.$emit("close");
    },
  },
};
</script>

<style lang="scss" scoped>
.preview-section {
  width: 100%;
  height: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 400;
  .preview-bg {
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: 0.45;
  }
  .preview-content {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 111;
    display: flex;
    justify-content: center;
    align-items: center;
    video {
      width: 375px;
    }
  }
}
</style>
